<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流光小队 - 首页</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 轮播图样式 */
        .carousel-container {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
            border-radius: 12px;
            margin-bottom: 40px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .carousel-slides {
            display: flex;
            width: 500%;
            height: 100%;
            transition: transform 0.8s ease-in-out;
        }

        .carousel-slide {
            width: 20%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .carousel-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }



        .carousel-slide {
            cursor: pointer;
        }

        .carousel-slide:hover img {
            transform: scale(1.05);
        }

        .carousel-nav {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .carousel-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .carousel-dot.active {
            background: white;
            transform: scale(1.2);
        }

        .carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 1.2em;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .carousel-arrow:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%) scale(1.1);
        }

        .carousel-arrow.prev {
            left: 20px;
        }

        .carousel-arrow.next {
            right: 20px;
        }

        /* 滚动头像展示样式 */
        .avatar-scroll-section {
            margin-bottom: 40px;
        }

        .section-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .section-header h3 {
            font-size: 1.8em;
            color: #2d3748;
            font-weight: 600;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .section-header p {
            color: #718096;
            font-size: 1.1em;
            margin: 0;
        }

        .avatar-scroll-container {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
            border-radius: 20px;
            padding: 30px 0;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        .avatar-scroll-track {
            display: flex;
            gap: 20px;
            animation: scrollAvatars 30s linear infinite;
            padding: 0 20px;
        }

        .avatar-item {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            min-width: 120px;
        }

        .avatar-image {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid white;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .avatar-image:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .avatar-name {
            font-size: 0.9em;
            color: #2d3748;
            font-weight: 500;
            text-align: center;
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .avatar-role {
            font-size: 0.8em;
            color: #718096;
            text-align: center;
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        @keyframes scrollAvatars {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        /* 荣誉证书展示样式 */
        .certificates-section {
            margin-bottom: 40px;
        }

        .certificates-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }

        .certificate-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            border: 1px solid #e2e8f0;
        }

        .certificate-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        .certificate-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px 20px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .certificate-header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: shimmer 3s ease-in-out infinite;
        }

        .certificate-icon {
            font-size: 3em;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }

        .certificate-title {
            font-size: 1.3em;
            font-weight: 700;
            margin-bottom: 8px;
            position: relative;
            z-index: 1;
        }

        .certificate-issuer {
            font-size: 0.9em;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }

        .certificate-content {
            padding: 20px;
        }

        .certificate-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            color: #718096;
            font-size: 0.9em;
        }

        .certificate-type {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: 500;
        }

        .certificate-date {
            color: #a0aec0;
            font-weight: 500;
        }

        .certificate-description {
            color: #4a5568;
            line-height: 1.6;
            font-size: 0.95em;
            margin-bottom: 15px;
        }

        .certificate-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 15px;
            border-top: 1px solid #e2e8f0;
        }

        .certificate-stat {
            text-align: center;
        }

        .certificate-stat-value {
            font-size: 1.2em;
            font-weight: 700;
            color: #2d3748;
        }

        .certificate-stat-label {
            font-size: 0.8em;
            color: #718096;
            margin-top: 2px;
        }

        @keyframes shimmer {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(180deg); }
        }

        /* 不同证书类型的颜色变体 */
        .certificate-card:nth-child(2) .certificate-header {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .certificate-card:nth-child(2) .certificate-type {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .certificate-card:nth-child(3) .certificate-header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .certificate-card:nth-child(3) .certificate-type {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .certificate-card:nth-child(4) .certificate-header {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .certificate-card:nth-child(4) .certificate-type {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .certificate-card:nth-child(5) .certificate-header {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }

        .certificate-card:nth-child(5) .certificate-type {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }

        .certificate-card:nth-child(6) .certificate-header {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }

        .certificate-card:nth-child(6) .certificate-type {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }

        /* 比赛日历样式 */
        .competition-calendar-section {
            margin-bottom: 40px;
        }

        .calendar-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .controls-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .view-toggle {
            display: flex;
            background: #f7fafc;
            border-radius: 8px;
            padding: 4px;
            border: 1px solid #e2e8f0;
        }

        .view-btn {
            background: transparent;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9em;
            color: #4a5568;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .view-btn.active {
            background: white;
            color: #667eea;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .view-btn:hover:not(.active) {
            background: rgba(102, 126, 234, 0.1);
        }

        .calendar-filters {
            display: flex;
            gap: 10px;
        }

        .calendar-filters select {
            padding: 8px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: white;
            color: #4a5568;
            font-size: 0.9em;
            cursor: pointer;
            transition: border-color 0.3s ease;
        }

        .calendar-filters select:focus {
            outline: none;
            border-color: #667eea;
        }

        /* 日历样式 */
        .calendar-container {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .calendar-nav-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .calendar-nav-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }

        .calendar-header h4 {
            font-size: 1.3em;
            font-weight: 600;
            margin: 0;
        }

        .calendar-grid {
            padding: 20px;
        }

        .calendar-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 1px;
            margin-bottom: 10px;
        }

        .weekday {
            padding: 15px 10px;
            text-align: center;
            font-weight: 600;
            color: #4a5568;
            background: #f7fafc;
            border-radius: 8px;
            font-size: 0.9em;
        }

        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 1px;
        }

        .calendar-day {
            min-height: 180px;
            padding: 8px;
            border: 1px solid #e2e8f0;
            background: white;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .calendar-day:hover {
            background: #f7fafc;
            transform: scale(1.02);
        }

        .calendar-day.other-month {
            background: #f7fafc;
            color: #a0aec0;
        }

        .calendar-day.today {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-weight: 600;
        }

        .day-number {
            font-size: 0.9em;
            font-weight: 500;
            margin-bottom: 5px;
        }

        .competition-events {
            display: flex;
            flex-direction: column;
            gap: 4px;
            max-height: 140px;
            overflow-y: auto;
            padding-right: 2px;
        }

        .competition-events::-webkit-scrollbar {
            width: 4px;
        }

        .competition-events::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 2px;
        }

        .competition-events::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 2px;
        }

        .competition-events::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }

        .competition-event {
            font-size: 0.55em;
            padding: 3px 5px;
            border-radius: 3px;
            color: white;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.3;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            border: 1px solid rgba(255, 255, 255, 0.2);
            min-height: 18px;
            display: flex;
            align-items: center;
        }

        .competition-event:hover {
            z-index: 10;
            transform: scale(1.02);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        .competition-event:hover {
            transform: scale(1.05);
            z-index: 10;
        }

        /* 为每个比赛分配独特颜色 */
        .competition-event[data-competition="全国大学生创新创业大赛"] {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .competition-event[data-competition="互联网+创新创业大赛"] {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .competition-event[data-competition="ACM程序设计竞赛"] {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .competition-event[data-competition="数学建模竞赛"] {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .competition-event[data-competition="蓝桥杯程序设计大赛"] {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }

        .competition-event[data-competition="挑战杯科技竞赛"] {
            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        }

        .competition-event[data-competition="电子设计竞赛"] {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        }

        .competition-event[data-competition="机器人竞赛"] {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
        }

        .competition-event[data-competition="数据挖掘竞赛"] {
            background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
        }

        .competition-event[data-competition="人工智能竞赛"] {
            background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%);
        }

        .competition-event[data-competition="网络安全竞赛"] {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        }

        .competition-event[data-competition="区块链创新大赛"] {
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
        }

        .competition-event[data-competition="云计算竞赛"] {
            background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
        }

        .competition-event[data-competition="移动应用开发大赛"] {
            background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%);
        }

        .competition-event[data-competition="物联网创新大赛"] {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        }

        .competition-event.special-date {
            font-weight: 700;
            border: 2px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            background-clip: padding-box;
        }

        .competition-event.ongoing {
            opacity: 0.85;
            font-weight: 500;
        }

        .competition-event.ongoing:hover {
            opacity: 1;
            transform: scale(1.02);
        }



        .event-tooltip {
            position: absolute;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            font-size: 0.8em;
            z-index: 1000;
            pointer-events: none;
            max-width: 200px;
            white-space: normal;
            display: none;
        }

        /* 时间线视图样式 */
        .competitions-timeline {
            position: relative;
            padding-left: 30px;
        }

        .competitions-timeline::before {
            content: '';
            position: absolute;
            left: 15px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, #667eea, #764ba2);
        }

        .competition-item {
            position: relative;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            margin-bottom: 25px;
            padding: 20px;
            border-left: 4px solid #667eea;
            transition: all 0.3s ease;
        }

        .competition-item:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
        }

        .competition-item::before {
            content: '';
            position: absolute;
            left: -22px;
            top: 25px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #667eea;
            border: 3px solid white;
            box-shadow: 0 0 0 2px #667eea;
        }

        .competition-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }

        .competition-title {
            font-size: 1.2em;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 5px;
        }

        .competition-level {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: 500;
            color: white;
        }

        .competition-level.校赛 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .competition-level.省赛 {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .competition-level.国赛 {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .competition-level.国际赛 {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .competition-status {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: 500;
        }

        .competition-status.报名中 {
            background: #e6fffa;
            color: #38a169;
        }

        .competition-status.准备中 {
            background: #fffaf0;
            color: #d69e2e;
        }

        .competition-status.进行中 {
            background: #ebf8ff;
            color: #3182ce;
        }

        .competition-status.已结束 {
            background: #f7fafc;
            color: #718096;
        }

        .competition-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }

        .detail-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #4a5568;
            font-size: 0.9em;
        }

        .detail-item i {
            color: #667eea;
            width: 16px;
        }

        .competition-description {
            color: #718096;
            line-height: 1.6;
            font-size: 0.9em;
            margin-bottom: 15px;
        }

        .competition-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .competition-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }

        .competition-title {
            font-size: 1.2em;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 5px;
        }

        .competition-level {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: 500;
            color: white;
        }

        .competition-level.校赛 {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .competition-level.省赛 {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .competition-level.国赛 {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .competition-level.国际赛 {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .competition-status {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: 500;
        }

        .competition-status.报名中 {
            background: #e6fffa;
            color: #38a169;
        }

        .competition-status.准备中 {
            background: #fffaf0;
            color: #d69e2e;
        }

        .competition-status.进行中 {
            background: #ebf8ff;
            color: #3182ce;
        }

        .competition-status.已结束 {
            background: #f7fafc;
            color: #718096;
        }

        .competition-details {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 15px;
        }

        .detail-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #4a5568;
            font-size: 0.9em;
        }

        .detail-item i {
            color: #667eea;
            width: 16px;
        }

        .competition-description {
            color: #718096;
            line-height: 1.6;
            font-size: 0.9em;
            margin-bottom: 15px;
        }

        .competition-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 0.8em;
            border-radius: 6px;
        }

        .btn-danger {
            background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
            color: white;
            border: none;
        }

        .btn-danger:hover {
            background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
        }

        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }

        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 30px;
            border-radius: 16px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e2e8f0;
        }

        .modal-title {
            font-size: 1.5em;
            font-weight: 600;
            color: #2d3748;
        }

        .close {
            color: #a0aec0;
            font-size: 1.5em;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .close:hover {
            color: #4a5568;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #4a5568;
        }

        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 0.9em;
            transition: border-color 0.3s ease;
        }

        .form-input:focus {
            outline: none;
            border-color: #667eea;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .modal-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid #e2e8f0;
        }

        /* 展示成果样式 */
        .achievements-section {
            margin-bottom: 40px;
        }

        .achievement-tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .tab-btn {
            background: #f7fafc;
            border: 1px solid #e2e8f0;
            padding: 10px 16px;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9em;
            color: #4a5568;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .tab-btn:hover {
            background: #edf2f7;
            transform: translateY(-2px);
        }

        .tab-btn.active {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: transparent;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
        }

        .achievements-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .achievement-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: all 0.3s ease;
            cursor: pointer;
            border: 1px solid #e2e8f0;
        }

        .achievement-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        }

        .achievement-image {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3em;
            overflow: hidden;
        }

        .achievement-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .achievement-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .achievement-card:hover .achievement-image::before {
            opacity: 1;
        }

        .achievement-content {
            padding: 20px;
        }

        .achievement-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .achievement-category {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8em;
            font-weight: 500;
        }

        .achievement-date {
            color: #a0aec0;
            font-size: 0.9em;
        }

        .achievement-title {
            font-size: 1.2em;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .achievement-description {
            color: #718096;
            line-height: 1.6;
            font-size: 0.95em;
            margin-bottom: 15px;
        }

        .achievement-stats {
            display: flex;
            gap: 15px;
            padding-top: 15px;
            border-top: 1px solid #e2e8f0;
        }

        .achievement-stat {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #4a5568;
            font-size: 0.9em;
        }

        .achievement-stat i {
            color: #667eea;
        }

        /* 不同类别的颜色变体 */
        .achievement-card[data-category="research"] .achievement-category {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .achievement-card[data-category="projects"] .achievement-category {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .achievement-card[data-category="artworks"] .achievement-category {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }

        .achievement-card[data-category="videos"] .achievement-category {
            background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
        }

        .achievement-card[data-category="awards"] .achievement-category {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        }



        /* 加载状态样式 */
        .loading-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            color: #718096;
        }

        .loading-state i {
            font-size: 2em;
            margin-bottom: 20px;
            color: #667eea;
        }

        .loading-state h4 {
            font-size: 1.2em;
            margin: 0;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .carousel-container {
                height: 300px;
            }

            .avatar-scroll-container {
                padding: 20px 0;
            }

            .avatar-item {
                min-width: 100px;
            }

            .avatar-image {
                width: 60px;
                height: 60px;
            }

            .avatar-name {
                font-size: 0.8em;
                max-width: 80px;
            }

            .avatar-role {
                font-size: 0.7em;
                max-width: 80px;
            }

            .certificates-grid {
                grid-template-columns: 1fr;
            }

            .certificate-card {
                margin-bottom: 20px;
            }

            .certificate-header {
                padding: 20px 15px;
            }

            .certificate-icon {
                font-size: 2.5em;
            }

            .certificate-title {
                font-size: 1.1em;
            }

            .calendar-controls {
                flex-direction: column;
                align-items: stretch;
            }

            .controls-left {
                flex-direction: column;
                gap: 10px;
            }

            .view-toggle {
                justify-content: center;
            }

            .calendar-filters {
                justify-content: center;
            }

            .competition-details {
                grid-template-columns: 1fr;
            }

            .competition-actions {
                justify-content: center;
            }

            .calendar-day {
                min-height: 150px;
                padding: 5px;
            }

            .competition-event {
                font-size: 0.45em;
                padding: 2px 4px;
                min-height: 16px;
            }

            .competition-events {
                max-height: 120px;
                gap: 3px;
            }

            .day-number {
                font-size: 0.8em;
            }

            .modal-content {
                margin: 10% auto;
                width: 95%;
                padding: 20px;
            }

            .form-row {
                grid-template-columns: 1fr;
            }

            .achievement-tabs {
                gap: 8px;
            }

            .tab-btn {
                padding: 8px 12px;
                font-size: 0.8em;
            }

            .achievements-grid {
                grid-template-columns: 1fr;
            }

            .achievement-card {
                margin-bottom: 20px;
            }

            .achievement-image {
                height: 150px;
            }

            .achievement-stats {
                flex-direction: column;
                gap: 8px;
            }




        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>流光小队</h3>
            <button class="sidebar-toggle" onclick="toggleSidebar()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <nav class="sidebar-nav">
            <ul>
                <!-- 首页 / 小组简介 -->
                <li class="active">
                    <a href="index.html">
                        <i class="fas fa-home"></i>
                        首页
                    </a>
                </li>
                <li>
                    <a href="pages/about/index.html">
                        <i class="fas fa-info-circle"></i>
                        关于我们
                    </a>
                </li>
                
                <!-- 成员相关 -->
                <li>
                    <a href="pages/members/index.html">
                        <i class="fas fa-users"></i>
                        成员介绍
                    </a>
                </li>
                <li>
                    <a href="pages/excellent/index.html">
                        <i class="fas fa-star"></i>
                        优秀成员
                    </a>
                </li>
                
                <!-- 活动相关 -->
                <li>
                    <a href="pages/activities/upcoming.html">
                        <i class="fas fa-calendar-alt"></i>
                        活动预告
                    </a>
                </li>
                <li>
                    <a href="pages/past/index.html">
                        <i class="fas fa-history"></i>
                        往期活动
                    </a>
                </li>
                <li>
                    <a href="pages/calendar/index.html">
                        <i class="fas fa-calendar"></i>
                        活动日历
                    </a>
                </li>
                
                <!-- 成果与资源 -->
                <li>
                    <a href="pages/achievements/index.html">
                        <i class="fas fa-trophy"></i>
                        小组成果
                    </a>
                </li>
                <li>
                    <a href="pages/resources/index.html">
                        <i class="fas fa-book"></i>
                        学习资料
                    </a>
                </li>
                
                <!-- 互动与讨论 -->
                <li>
                    <a href="pages/interaction/index.html">
                        <i class="fas fa-comments"></i>
                        互动交流
                    </a>
                </li>
                
                <!-- 加入与联系 -->
                <li>
                    <a href="pages/join/index.html">
                        <i class="fas fa-user-plus"></i>
                        加入我们
                    </a>
                </li>
                <li>
                    <a href="pages/contact/index.html">
                        <i class="fas fa-address-book"></i>
                        联系方式
                    </a>
                </li>
                
                <!-- 其他扩展 -->
                <li>
                    <a href="pages/partners/index.html">
                        <i class="fas fa-handshake"></i>
                        合作伙伴
                    </a>
                </li>
                <li>
                    <a href="pages/faq/index.html">
                        <i class="fas fa-question-circle"></i>
                        常见问题
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="topbar">
            <div class="topbar-left">
                <button class="menu-toggle" onclick="toggleSidebar()">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>流光小队</h1>

            </div>
            <div class="switch-page">
                <button class="btn btn-secondary" onclick="switchToQiuPage()">
                    <i class="fas fa-exchange-alt"></i> 信工排球
                </button>
            </div>
            <script>
                function switchToQiuPage() {
                    window.location.href = 'index_qiu.html';
                }
            </script>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <!-- 首页内容 -->
            <div id="home-page" class="page active">
                <div class="page-header">
                    <h2>欢迎流光小队</h2>
                    <div class="btn btn-primary">
                        <i class="fas fa-plus"></i>
                        快速操作
                    </div>
                </div>

                <!-- 轮播图 -->
                <div class="carousel-container">
                    <div class="carousel-slides" id="carouselSlides">
                        <div class="carousel-slide" onclick="navigateToPage('courses')">
                            <img src="https://images.unsplash.com/photo-1523240798132-8757214e76ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="优质教育资源">
                            </div>
                        <div class="carousel-slide" onclick="navigateToPage('teachers')">
                            <img src="https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="专业教师团队">
                        </div>
                        <div class="carousel-slide" onclick="navigateToPage('news')">
                            <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="智能学习系统">
                            </div>
                        <div class="carousel-slide" onclick="navigateToPage('enrollments')">
                            <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="全面技能培养">
                        </div>
                        <div class="carousel-slide" onclick="navigateToPage('reviews')">
                            <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="未来教育模式">
                        </div>
                    </div>
                    <button class="carousel-arrow prev" onclick="previousSlide()">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="carousel-arrow next" onclick="nextSlide()">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                    <div class="carousel-nav" id="carouselNav">
                        <div class="carousel-dot active" onclick="currentSlide(1)"></div>
                        <div class="carousel-dot" onclick="currentSlide(2)"></div>
                        <div class="carousel-dot" onclick="currentSlide(3)"></div>
                        <div class="carousel-dot" onclick="currentSlide(4)"></div>
                        <div class="carousel-dot" onclick="currentSlide(5)"></div>
                    </div>
                </div>

                <!-- 滚动头像展示 -->
                <div class="avatar-scroll-section">
                    <div class="section-header">
                        <h3><i class="fas fa-users"></i> 团队成员</h3>
                        <p>流光小队的优秀成员们</p>
                        </div>
                    <div class="avatar-scroll-container">
                        <div class="avatar-scroll-track" id="avatarScrollTrack">
                            <!-- 头像将通过JavaScript动态生成 -->
                        </div>
                    </div>
                        </div>

                <!-- 荣誉证书展示区域 -->
                <div class="certificates-section">
                    <div class="section-header">
                        <h3>
                            <i class="fas fa-trophy"></i>
                            荣誉证书
                        </h3>
                        <p>流光小队获得的荣誉与成就</p>
                        </div>
                    <div class="certificates-grid" id="certificatesGrid">
                        <!-- 证书卡片将通过JavaScript动态生成 -->
                    </div>
                        </div>

                <!-- 比赛日历区域 -->
                <div class="competition-calendar-section">
                    <div class="section-header">
                        <h3>
                            <i class="fas fa-calendar-alt"></i>
                            比赛日历
                        </h3>
                        <p>重要比赛时间安排与进度跟踪</p>
                        </div>
                    <div class="calendar-controls">
                        <div class="controls-left">
                            <button class="btn btn-primary" onclick="showAddCompetitionModal()">
                                <i class="fas fa-plus"></i> 添加比赛
                            </button>
                            <div class="view-toggle">
                                <button class="view-btn active" onclick="switchView('calendar')" id="calendarViewBtn">
                                    <i class="fas fa-calendar-alt"></i> 日历视图
                                </button>
                                <button class="view-btn" onclick="switchView('list')" id="listViewBtn">
                                    <i class="fas fa-list"></i> 列表视图
                                </button>
                    </div>
                        </div>
                        <div class="calendar-filters">
                            <select id="levelFilter" onchange="filterCompetitions()">
                                <option value="">全部级别</option>
                                <option value="校赛">校赛</option>
                                <option value="省赛">省赛</option>
                                <option value="国赛">国赛</option>
                                <option value="国际赛">国际赛</option>
                            </select>
                            <select id="statusFilter" onchange="filterCompetitions()">
                                <option value="">全部状态</option>
                                <option value="报名中">报名中</option>
                                <option value="准备中">准备中</option>
                                <option value="进行中">进行中</option>
                                <option value="已结束">已结束</option>
                            </select>
                        </div>
                    </div>
                    <!-- 日历视图 -->
                    <div class="calendar-container" id="calendarView">
                        <div class="calendar-header">
                            <button class="calendar-nav-btn" onclick="previousMonth()">
                                <i class="fas fa-chevron-left"></i>
                            </button>
                            <h4 id="currentMonthYear">2024年3月</h4>
                            <button class="calendar-nav-btn" onclick="nextMonth()">
                                <i class="fas fa-chevron-right"></i>
                            </button>
                        </div>
                        <div class="calendar-grid">
                            <div class="calendar-weekdays">
                                <div class="weekday">日</div>
                                <div class="weekday">一</div>
                                <div class="weekday">二</div>
                                <div class="weekday">三</div>
                                <div class="weekday">四</div>
                                <div class="weekday">五</div>
                                <div class="weekday">六</div>
                            </div>
                            <div class="calendar-days" id="calendarDays">
                                <!-- 日历天数将通过JavaScript动态生成 -->
                        </div>
                    </div>
                </div>

                    <!-- 列表视图 -->
                    <div class="competitions-timeline" id="listView" style="display: none;">
                        <!-- 比赛时间线将通过JavaScript动态生成 -->
                    </div>
                </div>

                <!-- 展示成果区域 -->
                <div class="achievements-section">
                    <div class="section-header">
                        <h3>
                            <i class="fas fa-trophy"></i>
                            展示成果
                        </h3>
                        <p>小组研究/作品展示、获奖证书、活动荣誉</p>
                    </div>
                    
                    <!-- 成果分类标签 -->
                    <div class="achievement-tabs">
                        <button class="tab-btn active" onclick="switchAchievementTab('all')" data-tab="all">
                            <i class="fas fa-th"></i> 全部成果
                        </button>
                        <button class="tab-btn" onclick="switchAchievementTab('research')" data-tab="research">
                            <i class="fas fa-microscope"></i> 研究论文
                        </button>
                        <button class="tab-btn" onclick="switchAchievementTab('projects')" data-tab="projects">
                            <i class="fas fa-code"></i> 项目作品
                        </button>
                        <button class="tab-btn" onclick="switchAchievementTab('artworks')" data-tab="artworks">
                            <i class="fas fa-palette"></i> 手工艺/艺术
                        </button>
                        <button class="tab-btn" onclick="switchAchievementTab('videos')" data-tab="videos">
                            <i class="fas fa-video"></i> 视频作品
                        </button>
                        <button class="tab-btn" onclick="switchAchievementTab('awards')" data-tab="awards">
                            <i class="fas fa-medal"></i> 获奖证书
                        </button>
                    </div>

                    <!-- 成果展示网格 -->
                    <div class="achievements-grid" id="achievementsGrid">
                        <!-- 成果卡片将通过JavaScript动态生成 -->
                </div>
                </div>


            </div>

            <!-- 其他页面内容将通过JavaScript动态加载 -->
            <div id="page-content"></div>
        </div>
    </div>

    <!-- 比赛管理模态框 -->
    <div id="competitionModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">添加新比赛</h3>
                <span class="close" onclick="closeModal()">&times;</span>
            </div>
            <form id="competitionForm">
                <input type="hidden" id="competitionId" name="id">
                
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="competitionTitle">比赛名称 *</label>
                        <input type="text" id="competitionTitle" name="title" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="organizer">主办方 *</label>
                        <input type="text" id="organizer" name="organizer" class="form-input" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="competitionLevel">比赛级别 *</label>
                        <select id="competitionLevel" name="level" class="form-input" required>
                            <option value="">请选择级别</option>
                            <option value="校赛">校赛</option>
                            <option value="省赛">省赛</option>
                            <option value="国赛">国赛</option>
                            <option value="国际赛">国际赛</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="competitionStatus">当前状态 *</label>
                        <select id="competitionStatus" name="status" class="form-input" required>
                            <option value="">请选择状态</option>
                            <option value="报名中">报名中</option>
                            <option value="准备中">准备中</option>
                            <option value="进行中">进行中</option>
                            <option value="已结束">已结束</option>
                        </select>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="startDate">开始日期 *</label>
                        <input type="date" id="startDate" name="startDate" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="endDate">结束日期 *</label>
                        <input type="date" id="endDate" name="endDate" class="form-input" required>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="submitDate">提交截止日期 *</label>
                        <input type="date" id="submitDate" name="submitDate" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="finalDate">决赛日期</label>
                        <input type="date" id="finalDate" name="finalDate" class="form-input">
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label" for="location">比赛地点 *</label>
                        <input type="text" id="location" name="location" class="form-input" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="submitForm">提交形式 *</label>
                        <input type="text" id="submitForm" name="submitForm" class="form-input" placeholder="如：线上提交、线下提交、在线编程等" required>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="description">比赛描述</label>
                    <textarea id="description" name="description" class="form-input" rows="3" placeholder="请描述比赛的具体要求和注意事项..."></textarea>
                </div>

                <div class="modal-actions">
                    <button type="button" class="btn btn-secondary" onclick="closeModal()">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveCompetition()">保存</button>
                </div>
            </form>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="api/config.js"></script>
    <script src="api/health.js"></script>
    <script>
        // 页面加载完成后执行健康检查
        document.addEventListener('DOMContentLoaded', async function() {
            console.log('🚀 开始执行健康检查...');
            
            // 使用全局变量调用健康检查
            if (window.HealthAPI) {
                console.log('🔍 执行综合服务状态检查...');
                const statusResult = await window.HealthAPI.checkServiceStatus();
                console.log('综合服务状态:', statusResult);
                console.log('✅ 健康检查完成！');
            } else {
                console.error('❌ HealthAPI 未找到！');
            }
        });
    </script>
    <script>
        // 轮播图功能
        let currentSlideIndex = 0;
        const totalSlides = 5;

        function showSlide(index) {
            const slides = document.getElementById('carouselSlides');
            const dots = document.querySelectorAll('.carousel-dot');
            
            slides.style.transform = `translateX(-${index * 20}%)`;
            
            dots.forEach((dot, i) => {
                dot.classList.toggle('active', i === index);
            });
        }

        function nextSlide() {
            currentSlideIndex = (currentSlideIndex + 1) % totalSlides;
            showSlide(currentSlideIndex);
        }

        function previousSlide() {
            currentSlideIndex = (currentSlideIndex - 1 + totalSlides) % totalSlides;
            showSlide(currentSlideIndex);
        }

        function currentSlide(index) {
            currentSlideIndex = index - 1;
            showSlide(currentSlideIndex);
        }

        // 自动轮播
        setInterval(nextSlide, 5000);

        // 侧边栏切换
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('open');
        }

        // 页面导航功能
        function showPage(pageName) {
            // 更新侧边栏活跃状态
            document.querySelectorAll('.sidebar-nav li').forEach(li => {
                li.classList.remove('active');
            });
            
            // 隐藏首页
            document.getElementById('home-page').classList.remove('active');
            
            if (pageName === 'home') {
                document.getElementById('home-page').classList.add('active');
                document.querySelector('.sidebar-nav li:first-child').classList.add('active');
                return;
            }
            
            // 为导航项添加活跃状态
            const navLinks = document.querySelectorAll('.sidebar-nav a');
            navLinks.forEach(link => {
                if (link.getAttribute('onclick').includes(pageName)) {
                    link.parentElement.classList.add('active');
                }
            });
            
            // 加载对应页面内容
            loadPageContent(pageName);
        }

        // 加载页面内容
        function loadPageContent(pageName) {
            const pageContent = document.getElementById('page-content');
            
            fetch(`views/${pageName}.html`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('页面不存在');
                    }
                    return response.text();
                })
                .then(html => {
                    pageContent.innerHTML = html;
                    pageContent.style.display = 'block';
                })
                .catch(error => {
                    pageContent.innerHTML = `
                        <div class="page">
                            <div class="page-header">
                                <h2>${getPageTitle(pageName)}</h2>
                            </div>
                            <div class="empty-state">
                                <i class="fas fa-file-alt"></i>
                                <h4>页面正在开发中</h4>
                                <p>该页面内容正在开发中，敬请期待...</p>
                            </div>
                        </div>
                    `;
                    pageContent.style.display = 'block';
                });
        }

        // 获取页面标题
        function getPageTitle(pageName) {
            const titles = {
                'courses': '课程管理',
                'students': '学生管理', 
                'teachers': '教师管理',
                'news': '新闻管理',
                'categories': '分类管理',
                'enrollments': '报名管理',
                'reviews': '评价管理',
                'settings': '系统设置'
            };
            return titles[pageName] || '页面';
        }

        // 轮播图点击导航功能
        function navigateToPage(pageName) {
            // 阻止事件冒泡，避免触发轮播图切换
            event.stopPropagation();
            
            // 显示加载提示
            const pageContent = document.getElementById('page-content');
            pageContent.innerHTML = `
                <div class="page">
                    <div class="page-header">
                        <h2>${getPageTitle(pageName)}</h2>
                    </div>
                    <div class="loading-state">
                        <i class="fas fa-spinner fa-spin"></i>
                        <h4>正在加载...</h4>
                    </div>
                </div>
            `;
            pageContent.style.display = 'block';
            
            // 隐藏首页
            document.getElementById('home-page').classList.remove('active');
            
            // 更新侧边栏活跃状态
            document.querySelectorAll('.sidebar-nav li').forEach(li => {
                li.classList.remove('active');
            });
            
            // 为对应的导航项添加活跃状态
            const navLinks = document.querySelectorAll('.sidebar-nav a');
            navLinks.forEach(link => {
                if (link.getAttribute('onclick').includes(pageName)) {
                    link.parentElement.classList.add('active');
                }
            });
            
            // 加载对应页面内容
            loadPageContent(pageName);
        }

        // 初始化头像数据
        function initAvatarData() {
            const avatarData = [
                {
                    name: '张三',
                    role: '队长',
                    image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
                },
                {
                    name: '李四',
                    role: '副队长',
                    image: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
                },
                {
                    name: '王五',
                    role: '技术总监',
                    image: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
                },
                {
                    name: '赵六',
                    role: '产品经理',
                    image: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
                },
                {
                    name: '钱七',
                    role: '设计师',
                    image: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
                },
                {
                    name: '孙八',
                    role: '开发工程师',
                    image: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
                },
                {
                    name: '周九',
                    role: '测试工程师',
                    image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
                },
                {
                    name: '吴十',
                    role: '运营专员',
                    image: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
                },
                {
                    name: '郑十一',
                    role: '数据分析师',
                    image: 'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
                },
                {
                    name: '王十二',
                    role: '市场专员',
                    image: 'https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80'
                }
            ];

            const avatarTrack = document.getElementById('avatarScrollTrack');
            
            // 创建两倍的头像列表，实现无缝滚动
            const avatarHTML = avatarData.map(avatar => `
                <div class="avatar-item" onclick="showMemberDetail('${avatar.name}')">
                    <img src="${avatar.image}" alt="${avatar.name}" class="avatar-image" onerror="this.src='https://via.placeholder.com/80x80/667eea/ffffff?text=${avatar.name.charAt(0)}'">
                    <div class="avatar-name">${avatar.name}</div>
                    <div class="avatar-role">${avatar.role}</div>
                </div>
            `).join('');

            // 重复两次以实现无缝滚动
            avatarTrack.innerHTML = avatarHTML + avatarHTML;
        }

        // 初始化证书数据
        function initCertificatesData() {
            const certificatesData = [
                {
                    title: '全国大学生创新创业大赛',
                    issuer: '教育部',
                    type: '金奖',
                    date: '2024-01-15',
                    description: '在2024年全国大学生创新创业大赛中，流光小队凭借优秀的项目表现和创新能力，荣获全国金奖。',
                    icon: 'fas fa-trophy',
                    stats: {
                        participants: '5000+',
                        teams: '1000+',
                        rank: '第1名'
                    }
                },
                {
                    title: '互联网+创新创业大赛',
                    issuer: '中国互联网+大赛组委会',
                    type: '特等奖',
                    date: '2023-12-20',
                    description: '在第八届中国"互联网+"大学生创新创业大赛中，我们的项目获得了特等奖的殊荣。',
                    icon: 'fas fa-medal',
                    stats: {
                        participants: '3000+',
                        teams: '800+',
                        rank: '特等奖'
                    }
                },
                {
                    title: 'ACM程序设计竞赛',
                    issuer: 'ACM国际大学生程序设计竞赛',
                    type: '银奖',
                    date: '2023-11-10',
                    description: '在ACM国际大学生程序设计竞赛亚洲区域赛中，我们团队展现了出色的编程能力。',
                    icon: 'fas fa-code',
                    stats: {
                        participants: '2000+',
                        teams: '500+',
                        rank: '银奖'
                    }
                },
                {
                    title: '数学建模竞赛',
                    issuer: '全国大学生数学建模竞赛组委会',
                    type: '一等奖',
                    date: '2023-10-25',
                    description: '在全国大学生数学建模竞赛中，我们运用数学方法解决了复杂的实际问题。',
                    icon: 'fas fa-calculator',
                    stats: {
                        participants: '4000+',
                        teams: '1200+',
                        rank: '一等奖'
                    }
                },
                {
                    title: '挑战杯科技竞赛',
                    issuer: '共青团中央',
                    type: '二等奖',
                    date: '2023-09-15',
                    description: '在"挑战杯"全国大学生课外学术科技作品竞赛中，我们的作品获得了专家的一致好评。',
                    icon: 'fas fa-lightbulb',
                    stats: {
                        participants: '6000+',
                        teams: '1500+',
                        rank: '二等奖'
                    }
                },
                {
                    title: '蓝桥杯程序设计大赛',
                    issuer: '工业和信息化部',
                    type: '一等奖',
                    date: '2023-08-20',
                    description: '在蓝桥杯全国软件和信息技术专业人才大赛中，我们展现了扎实的编程功底。',
                    icon: 'fas fa-laptop-code',
                    stats: {
                        participants: '8000+',
                        teams: '2000+',
                        rank: '一等奖'
                    }
                }
            ];

            const certificatesGrid = document.getElementById('certificatesGrid');
            certificatesGrid.innerHTML = certificatesData.map(cert => `
                <div class="certificate-card" onclick="showCertificateDetail('${cert.title}')">
                    <div class="certificate-header">
                        <div class="certificate-icon">
                            <i class="${cert.icon}"></i>
                    </div>
                        <div class="certificate-title">${cert.title}</div>
                        <div class="certificate-issuer">${cert.issuer}</div>
                        </div>
                    <div class="certificate-content">
                        <div class="certificate-meta">
                            <span class="certificate-type">${cert.type}</span>
                            <span class="certificate-date">${cert.date}</span>
                        </div>
                        <div class="certificate-description">${cert.description}</div>
                        <div class="certificate-stats">
                            <div class="certificate-stat">
                                <div class="certificate-stat-value">${cert.stats.participants}</div>
                                <div class="certificate-stat-label">参赛人数</div>
                            </div>
                            <div class="certificate-stat">
                                <div class="certificate-stat-value">${cert.stats.teams}</div>
                                <div class="certificate-stat-label">参赛团队</div>
                            </div>
                            <div class="certificate-stat">
                                <div class="certificate-stat-value">${cert.stats.rank}</div>
                                <div class="certificate-stat-label">获得名次</div>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // 显示证书详情
        function showCertificateDetail(title) {
            alert('证书详情功能正在开发中：' + title);
        }

        // 显示成员详情
        function showMemberDetail(name) {
            alert('成员详情功能正在开发中：' + name);
        }

        // 比赛数据
        let competitions = [
            {
                id: 1,
                title: '全国大学生创新创业大赛',
                level: '国赛',
                status: '准备中',
                startDate: '2024-03-15',
                endDate: '2024-06-20',
                submitDate: '2024-05-15',
                finalDate: '2024-06-15',
                location: '北京',
                submitForm: '线上提交',
                description: '全国性创新创业大赛，需要提交商业计划书和项目展示材料。',
                organizer: '教育部'
            },
            {
                id: 2,
                title: '互联网+创新创业大赛',
                level: '省赛',
                status: '报名中',
                startDate: '2024-02-20',
                endDate: '2024-05-10',
                submitDate: '2024-04-20',
                finalDate: '2024-05-05',
                location: '杭州',
                submitForm: '线上+线下',
                description: '省级互联网+创新创业大赛，需要准备项目路演和答辩。',
                organizer: '省教育厅'
            },
            {
                id: 3,
                title: 'ACM程序设计竞赛',
                level: '校赛',
                status: '进行中',
                startDate: '2024-01-15',
                endDate: '2024-02-15',
                submitDate: '2024-02-10',
                finalDate: '2024-02-15',
                location: '校内机房',
                submitForm: '在线编程',
                description: '校内ACM程序设计竞赛，考察算法和编程能力。',
                organizer: '计算机学院'
            },
            {
                id: 4,
                title: '数学建模竞赛',
                level: '国赛',
                status: '已结束',
                startDate: '2023-09-15',
                endDate: '2023-09-18',
                submitDate: '2023-09-18',
                finalDate: '2023-09-18',
                location: '线上',
                submitForm: '线上提交',
                description: '全国大学生数学建模竞赛，72小时连续比赛。',
                organizer: '全国组委会'
            },
            {
                id: 5,
                title: '蓝桥杯程序设计大赛',
                level: '国赛',
                status: '报名中',
                startDate: '2024-03-01',
                endDate: '2024-04-30',
                submitDate: '2024-04-25',
                finalDate: '2024-04-30',
                location: '线上',
                submitForm: '在线编程',
                description: '蓝桥杯全国软件和信息技术专业人才大赛，考察编程技能。',
                organizer: '工业和信息化部'
            },
            {
                id: 6,
                title: '挑战杯科技竞赛',
                level: '省赛',
                status: '准备中',
                startDate: '2024-03-10',
                endDate: '2024-05-25',
                submitDate: '2024-05-20',
                finalDate: '2024-05-25',
                location: '省科技馆',
                submitForm: '线下提交',
                description: '挑战杯全国大学生课外学术科技作品竞赛，需要提交学术论文和实物作品。',
                organizer: '共青团中央'
            },
            {
                id: 7,
                title: '电子设计竞赛',
                level: '校赛',
                status: '进行中',
                startDate: '2024-02-01',
                endDate: '2024-03-31',
                submitDate: '2024-03-25',
                finalDate: '2024-03-31',
                location: '电子实验室',
                submitForm: '实物+报告',
                description: '全国大学生电子设计竞赛，需要设计制作电子作品。',
                organizer: '电子工程学院'
            },
            {
                id: 8,
                title: '机器人竞赛',
                level: '国际赛',
                status: '报名中',
                startDate: '2024-04-01',
                endDate: '2024-07-15',
                submitDate: '2024-07-10',
                finalDate: '2024-07-15',
                location: '上海',
                submitForm: '现场比赛',
                description: '国际机器人竞赛，需要设计制作机器人参加现场比赛。',
                organizer: '国际机器人协会'
            },
            {
                id: 9,
                title: '数据挖掘竞赛',
                level: '省赛',
                status: '准备中',
                startDate: '2024-03-05',
                endDate: '2024-04-20',
                submitDate: '2024-04-15',
                finalDate: '2024-04-20',
                location: '线上',
                submitForm: '线上提交',
                description: '数据挖掘与分析竞赛，需要提交分析报告和代码。',
                organizer: '省数据科学协会'
            },
            {
                id: 10,
                title: '人工智能竞赛',
                level: '国赛',
                status: '报名中',
                startDate: '2024-03-20',
                endDate: '2024-06-10',
                submitDate: '2024-06-05',
                finalDate: '2024-06-10',
                location: '深圳',
                submitForm: '线上+线下',
                description: '全国人工智能竞赛，需要开发AI模型和算法。',
                organizer: '中国人工智能学会'
            },
            {
                id: 11,
                title: '网络安全竞赛',
                level: '校赛',
                status: '进行中',
                startDate: '2024-01-20',
                endDate: '2024-03-10',
                submitDate: '2024-03-05',
                finalDate: '2024-03-10',
                location: '网络安全实验室',
                submitForm: '在线CTF',
                description: '网络安全竞赛，通过CTF形式考察安全技能。',
                organizer: '网络安全学院'
            },
            {
                id: 12,
                title: '区块链创新大赛',
                level: '省赛',
                status: '准备中',
                startDate: '2024-03-25',
                endDate: '2024-05-15',
                submitDate: '2024-05-10',
                finalDate: '2024-05-15',
                location: '线上',
                submitForm: '线上提交',
                description: '区块链技术创新大赛，需要开发区块链应用。',
                organizer: '省区块链协会'
            },
            {
                id: 13,
                title: '云计算竞赛',
                level: '国赛',
                status: '报名中',
                startDate: '2024-04-05',
                endDate: '2024-06-25',
                submitDate: '2024-06-20',
                finalDate: '2024-06-25',
                location: '北京',
                submitForm: '云端部署',
                description: '云计算技术竞赛，需要在云端部署应用。',
                organizer: '中国云计算产业联盟'
            },
            {
                id: 14,
                title: '移动应用开发大赛',
                level: '校赛',
                status: '进行中',
                startDate: '2024-02-10',
                endDate: '2024-04-05',
                submitDate: '2024-04-01',
                finalDate: '2024-04-05',
                location: '移动开发实验室',
                submitForm: 'APP提交',
                description: '移动应用开发竞赛，需要开发手机APP。',
                organizer: '软件工程学院'
            },
            {
                id: 15,
                title: '物联网创新大赛',
                level: '省赛',
                status: '准备中',
                startDate: '2024-03-30',
                endDate: '2024-05-20',
                submitDate: '2024-05-15',
                finalDate: '2024-05-20',
                location: '物联网实验室',
                submitForm: '实物+演示',
                description: '物联网创新大赛，需要设计制作物联网设备。',
                organizer: '省物联网协会'
            }
        ];

        // 日历相关变量
        let currentDate = new Date();
        let currentMonth = currentDate.getMonth();
        let currentYear = currentDate.getFullYear();

        // 初始化比赛日历
        function initCompetitionCalendar() {
            renderCalendar();
        }

        // 渲染日历
        function renderCalendar() {
            const calendarDays = document.getElementById('calendarDays');
            const currentMonthYear = document.getElementById('currentMonthYear');
            
            // 更新月份标题
            const monthNames = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
            currentMonthYear.textContent = `${currentYear}年${monthNames[currentMonth]}`;
            
            // 获取当月第一天和最后一天
            const firstDay = new Date(currentYear, currentMonth, 1);
            const lastDay = new Date(currentYear, currentMonth + 1, 0);
            const startDate = new Date(firstDay);
            startDate.setDate(startDate.getDate() - firstDay.getDay());
            
            let calendarHTML = '';
            
            // 生成6周的日历网格
            for (let week = 0; week < 6; week++) {
                for (let day = 0; day < 7; day++) {
                    const currentDayDate = new Date(startDate);
                    currentDayDate.setDate(startDate.getDate() + (week * 7) + day);
                    
                    const isCurrentMonth = currentDayDate.getMonth() === currentMonth;
                    const isToday = currentDayDate.toDateString() === new Date().toDateString();
                    const dayNumber = currentDayDate.getDate();
                    
                    // 获取当天的比赛事件
                    const dayEvents = getEventsForDate(currentDayDate);
                    
                    calendarHTML += `
                        <div class="calendar-day ${!isCurrentMonth ? 'other-month' : ''} ${isToday ? 'today' : ''}" 
                             data-date="${currentDayDate.toISOString().split('T')[0]}">
                            <div class="day-number">${dayNumber}</div>
                            <div class="competition-events">
                                ${dayEvents.map(event => `
                                    <div class="competition-event ${event.status} ${event.isSpecialDate ? 'special-date' : 'ongoing'}" 
                                         data-competition="${event.title}"
                                         title="${event.title} - ${event.type}"
                                         onclick="showEventDetail('${event.id}')">
                                        ${event.shortTitle}
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    `;
                }
            }
            
            calendarDays.innerHTML = calendarHTML;
        }

        // 获取指定日期的比赛事件
        function getEventsForDate(date) {
            const dateString = date.toISOString().split('T')[0];
            const events = [];
            
            competitions.forEach(comp => {
                const startDate = new Date(comp.startDate);
                const endDate = new Date(comp.endDate);
                const currentDate = new Date(dateString);
                
                // 检查是否在比赛期间内
                if (currentDate >= startDate && currentDate <= endDate) {
                    let eventType = '进行中';
                    let shortTitle = comp.title.substring(0, 4); // 取比赛名称前4个字
                    
                    // 特殊日期标记
                    if (comp.startDate === dateString) {
                        eventType = '比赛开始';
                        shortTitle = '开始';
                    } else if (comp.submitDate === dateString) {
                        eventType = '提交截止';
                        shortTitle = '提交';
                    } else if (comp.finalDate === dateString) {
                        eventType = '决赛';
                        shortTitle = '决赛';
                    } else if (comp.endDate === dateString) {
                        eventType = '比赛结束';
                        shortTitle = '结束';
                    }
                    
                    events.push({
                        id: comp.id,
                        title: comp.title,
                        shortTitle: shortTitle,
                        type: eventType,
                        level: comp.level,
                        status: comp.status,
                        isSpecialDate: comp.startDate === dateString || comp.submitDate === dateString || 
                                       comp.finalDate === dateString || comp.endDate === dateString
                    });
                }
            });
            
            return events;
        }

        // 显示事件详情
        function showEventDetail(competitionId) {
            const competition = competitions.find(comp => comp.id === parseInt(competitionId));
            if (competition) {
                const detailText = `
🏆 比赛：${competition.title}
📊 级别：${competition.level}
📈 状态：${competition.status}
📍 地点：${competition.location}
📤 提交形式：${competition.submitForm}
📅 时间安排：
   • 开始：${formatDate(competition.startDate)}
   • 提交：${formatDate(competition.submitDate)}
   • 决赛：${formatDate(competition.finalDate)}
   • 结束：${formatDate(competition.endDate)}
📝 描述：${competition.description}
                `;
                alert(detailText);
            }
        }



        // 上个月
        function previousMonth() {
            currentMonth--;
            if (currentMonth < 0) {
                currentMonth = 11;
                currentYear--;
            }
            renderCalendar();
        }

        // 下个月
        function nextMonth() {
            currentMonth++;
            if (currentMonth > 11) {
                currentMonth = 0;
                currentYear++;
            }
            renderCalendar();
        }

        // 格式化日期
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('zh-CN');
        }

        // 当前视图状态
        let currentView = 'calendar';
        let originalCompetitions = [...competitions]; // 保存原始数据

        // 切换视图
        function switchView(view) {
            currentView = view;
            
            // 更新按钮状态
            document.getElementById('calendarViewBtn').classList.toggle('active', view === 'calendar');
            document.getElementById('listViewBtn').classList.toggle('active', view === 'list');
            
            // 显示/隐藏对应视图
            document.getElementById('calendarView').style.display = view === 'calendar' ? 'block' : 'none';
            document.getElementById('listView').style.display = view === 'list' ? 'block' : 'none';
            
            // 重新渲染当前视图
            if (view === 'calendar') {
                renderCalendar();
            } else {
                renderCompetitionsList();
            }
        }

        // 渲染比赛列表
        function renderCompetitionsList() {
            const timeline = document.getElementById('listView');
            const competitionsToRender = competitions;
            
            timeline.innerHTML = competitionsToRender.map(comp => `
                <div class="competition-item" data-id="${comp.id}">
                    <div class="competition-header">
                        <div>
                            <div class="competition-title">${comp.title}</div>
                            <span class="competition-level ${comp.level}">${comp.level}</span>
                        </div>
                        <span class="competition-status ${comp.status}">${comp.status}</span>
                    </div>
                    <div class="competition-description">${comp.description}</div>
                    <div class="competition-details">
                        <div class="detail-item">
                            <i class="fas fa-calendar"></i>
                            <span>开始：${formatDate(comp.startDate)}</span>
                        </div>
                        <div class="detail-item">
                            <i class="fas fa-calendar-check"></i>
                            <span>结束：${formatDate(comp.endDate)}</span>
                        </div>
                        <div class="detail-item">
                            <i class="fas fa-upload"></i>
                            <span>提交：${formatDate(comp.submitDate)}</span>
                        </div>
                        <div class="detail-item">
                            <i class="fas fa-trophy"></i>
                            <span>决赛：${formatDate(comp.finalDate)}</span>
                        </div>
                        <div class="detail-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>地点：${comp.location}</span>
                        </div>
                        <div class="detail-item">
                            <i class="fas fa-file-upload"></i>
                            <span>提交形式：${comp.submitForm}</span>
                        </div>
                    </div>
                    <div class="competition-actions">
                        <button class="btn btn-secondary btn-sm" onclick="editCompetition(${comp.id})">
                            <i class="fas fa-edit"></i> 编辑
                        </button>
                        <button class="btn btn-danger btn-sm" onclick="deleteCompetition(${comp.id})">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                </div>
            `).join('');
        }

        // 过滤比赛
        function filterCompetitions() {
            const levelFilter = document.getElementById('levelFilter').value;
            const statusFilter = document.getElementById('statusFilter').value;
            
            let filtered = [...originalCompetitions]; // 从原始数据开始筛选
            
            if (levelFilter) {
                filtered = filtered.filter(comp => comp.level === levelFilter);
            }
            
            if (statusFilter) {
                filtered = filtered.filter(comp => comp.status === statusFilter);
            }
            
            // 更新当前显示的比赛数据
            competitions = filtered;
            
            // 根据当前视图重新渲染
            if (currentView === 'calendar') {
                renderCalendar();
            } else {
                renderCompetitionsList();
            }
        }

        // 显示添加比赛模态框
        function showAddCompetitionModal() {
            const modal = document.getElementById('competitionModal');
            modal.style.display = 'block';
            document.getElementById('modalTitle').textContent = '添加新比赛';
            document.getElementById('competitionForm').reset();
            document.getElementById('competitionId').value = '';
        }

        // 编辑比赛
        function editCompetition(id) {
            const competition = competitions.find(comp => comp.id === id);
            if (competition) {
                const modal = document.getElementById('competitionModal');
                modal.style.display = 'block';
                document.getElementById('modalTitle').textContent = '编辑比赛';
                
                // 填充表单
                document.getElementById('competitionId').value = competition.id;
                document.getElementById('competitionTitle').value = competition.title;
                document.getElementById('competitionLevel').value = competition.level;
                document.getElementById('competitionStatus').value = competition.status;
                document.getElementById('startDate').value = competition.startDate;
                document.getElementById('endDate').value = competition.endDate;
                document.getElementById('submitDate').value = competition.submitDate;
                document.getElementById('finalDate').value = competition.finalDate;
                document.getElementById('location').value = competition.location;
                document.getElementById('submitForm').value = competition.submitForm;
                document.getElementById('description').value = competition.description;
                document.getElementById('organizer').value = competition.organizer;
            }
        }

        // 删除比赛
        function deleteCompetition(id) {
            if (confirm('确定要删除这个比赛吗？')) {
                competitions = competitions.filter(comp => comp.id !== id);
                originalCompetitions = originalCompetitions.filter(comp => comp.id !== id);
                
                // 根据当前视图重新渲染
                if (currentView === 'calendar') {
                    renderCalendar();
                } else {
                    renderCompetitionsList();
                }
            }
        }

        // 保存比赛
        function saveCompetition() {
            const form = document.getElementById('competitionForm');
            const formData = new FormData(form);
            
            const competitionData = {
                title: formData.get('title'),
                level: formData.get('level'),
                status: formData.get('status'),
                startDate: formData.get('startDate'),
                endDate: formData.get('endDate'),
                submitDate: formData.get('submitDate'),
                finalDate: formData.get('finalDate'),
                location: formData.get('location'),
                submitForm: formData.get('submitForm'),
                description: formData.get('description'),
                organizer: formData.get('organizer')
            };
            
            const id = document.getElementById('competitionId').value;
            
            if (id) {
                // 编辑现有比赛
                const index = competitions.findIndex(comp => comp.id === parseInt(id));
                const originalIndex = originalCompetitions.findIndex(comp => comp.id === parseInt(id));
                if (index !== -1) {
                    competitions[index] = { ...competitions[index], ...competitionData };
                }
                if (originalIndex !== -1) {
                    originalCompetitions[originalIndex] = { ...originalCompetitions[originalIndex], ...competitionData };
                }
            } else {
                // 添加新比赛
                const newId = Math.max(...competitions.map(comp => comp.id), 0) + 1;
                const newCompetition = { id: newId, ...competitionData };
                competitions.push(newCompetition);
                originalCompetitions.push(newCompetition);
            }
            
            // 根据当前视图重新渲染
            if (currentView === 'calendar') {
                renderCalendar();
            } else {
                renderCompetitionsList();
            }
            closeModal();
        }

        // 关闭模态框
        function closeModal() {
            const modal = document.getElementById('competitionModal');
            modal.style.display = 'none';
        }

        // 成果数据
        let achievements = [
            {
                id: 1,
                title: '基于深度学习的智能推荐系统研究',
                category: 'research',
                type: '研究论文',
                date: '2024-01-15',
                description: '本研究提出了一种基于深度学习的智能推荐算法，在多个数据集上取得了显著的效果提升。',
                image: 'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
                icon: 'fas fa-microscope',
                stats: {
                    citations: '15',
                    downloads: '234',
                    rating: '4.8'
                }
            },
            {
                id: 2,
                title: '智能校园导航APP',
                category: 'projects',
                type: '项目作品',
                date: '2024-02-20',
                description: '基于React Native开发的智能校园导航应用，集成了实时定位、路径规划和校园信息查询功能。',
                image: 'https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
                icon: 'fas fa-code',
                stats: {
                    downloads: '1.2k',
                    rating: '4.9',
                    users: '5.6k'
                }
            },
            {
                id: 3,
                title: '手工制作的智能机器人模型',
                category: 'artworks',
                type: '手工艺/艺术',
                date: '2024-01-30',
                description: '使用废旧材料制作的智能机器人模型，集成了LED灯光和简单的运动控制功能。',
                image: 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
                icon: 'fas fa-palette',
                stats: {
                    views: '456',
                    likes: '89',
                    shares: '23'
                }
            },
            {
                id: 4,
                title: '流光小队宣传片',
                category: 'videos',
                type: '视频作品',
                date: '2024-02-10',
                description: '展示流光小队团队精神和技术实力的宣传视频，包含项目展示和团队介绍。',
                image: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
                icon: 'fas fa-video',
                stats: {
                    views: '2.3k',
                    likes: '156',
                    shares: '45'
                }
            },
            {
                id: 5,
                title: '全国大学生创新创业大赛金奖',
                category: 'awards',
                type: '获奖证书',
                date: '2024-01-20',
                description: '在2024年全国大学生创新创业大赛中获得金奖，项目获得专家一致好评。',
                image: 'https://images.unsplash.com/photo-1606152393924-a3c41ff2a7fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
                icon: 'fas fa-medal',
                stats: {
                    level: '国家级',
                    participants: '5000+',
                    rank: '第1名'
                }
            },
            {
                id: 6,
                title: '区块链技术在供应链管理中的应用研究',
                category: 'research',
                type: '研究论文',
                date: '2024-02-05',
                description: '探讨区块链技术在供应链管理中的创新应用，提出了新的解决方案和优化策略。',
                image: 'https://images.unsplash.com/photo-1639762681485-074b7f938ba0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
                icon: 'fas fa-microscope',
                stats: {
                    citations: '8',
                    downloads: '156',
                    rating: '4.6'
                }
            },
            {
                id: 7,
                title: '智能垃圾分类系统',
                category: 'projects',
                type: '项目作品',
                date: '2024-01-25',
                description: '基于计算机视觉的智能垃圾分类系统，能够自动识别和分类不同类型的垃圾。',
                image: 'https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
                icon: 'fas fa-code',
                stats: {
                    accuracy: '95%',
                    users: '2.1k',
                    rating: '4.7'
                }
            },
            {
                id: 8,
                title: '数字艺术作品集',
                category: 'artworks',
                type: '手工艺/艺术',
                date: '2024-02-15',
                description: '使用数字绘画技术创作的艺术作品集，展现了技术与艺术的完美结合。',
                image: 'https://images.unsplash.com/photo-1541961017774-22349e4a1262?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
                icon: 'fas fa-palette',
                stats: {
                    views: '789',
                    likes: '234',
                    shares: '67'
                }
            }
        ];

        let currentAchievementTab = 'all';

        // 初始化展示成果
        function initAchievements() {
            renderAchievements();
        }

        // 渲染成果展示
        function renderAchievements(filteredAchievements = null) {
            const grid = document.getElementById('achievementsGrid');
            const achievementsToRender = filteredAchievements || achievements;
            
            grid.innerHTML = achievementsToRender.map(achievement => `
                <div class="achievement-card" data-category="${achievement.category}" onclick="showAchievementDetail(${achievement.id})">
                    <div class="achievement-image">
                        <img src="${achievement.image}" alt="${achievement.title}" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                        <div style="display: none; position: absolute; align-items: center; justify-content: center; width: 100%; height: 100%;">
                            <i class="${achievement.icon}"></i>
                        </div>
                    </div>
                    <div class="achievement-content">
                        <div class="achievement-meta">
                            <span class="achievement-category">${achievement.type}</span>
                            <span class="achievement-date">${formatDate(achievement.date)}</span>
                        </div>
                        <h4 class="achievement-title">${achievement.title}</h4>
                        <p class="achievement-description">${achievement.description}</p>
                        <div class="achievement-stats">
                            ${Object.entries(achievement.stats).map(([key, value]) => `
                                <div class="achievement-stat">
                                    <i class="fas fa-${getStatIcon(key)}"></i>
                                    <span>${getStatLabel(key)}: ${value}</span>
                                </div>
                            `).join('')}
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // 获取统计图标
        function getStatIcon(key) {
            const icons = {
                citations: 'quote-left',
                downloads: 'download',
                rating: 'star',
                users: 'users',
                views: 'eye',
                likes: 'heart',
                shares: 'share',
                level: 'trophy',
                participants: 'users',
                rank: 'medal',
                accuracy: 'check-circle'
            };
            return icons[key] || 'info-circle';
        }

        // 获取统计标签
        function getStatLabel(key) {
            const labels = {
                citations: '引用',
                downloads: '下载',
                rating: '评分',
                users: '用户',
                views: '浏览',
                likes: '点赞',
                shares: '分享',
                level: '级别',
                participants: '参赛',
                rank: '排名',
                accuracy: '准确率'
            };
            return labels[key] || key;
        }

        // 切换成果标签
        function switchAchievementTab(tab) {
            currentAchievementTab = tab;
            
            // 更新标签状态
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.toggle('active', btn.getAttribute('data-tab') === tab);
            });
            
            // 过滤成果
            let filteredAchievements = achievements;
            if (tab !== 'all') {
                filteredAchievements = achievements.filter(achievement => achievement.category === tab);
            }
            
            renderAchievements(filteredAchievements);
        }

        // 显示成果详情
        function showAchievementDetail(id) {
            const achievement = achievements.find(a => a.id === id);
            if (achievement) {
                const detailText = `
🏆 成果：${achievement.title}
📂 类别：${achievement.type}
📅 日期：${formatDate(achievement.date)}
📝 描述：${achievement.description}

📊 统计信息：
${Object.entries(achievement.stats).map(([key, value]) => `   • ${getStatLabel(key)}: ${value}`).join('\n')}
                `;
                alert(detailText);
            }
        }



        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initAvatarData();
            initCertificatesData();
            initCompetitionCalendar();
            initAchievements();
            
            // 可以在这里加载统计数据
            // loadStatistics();
        });
    </script>
</body>
</html>

